<template>
	<view>
		<uni-popup ref="popcash" type="bottom" @change="popChange">
			<view class="pop_phone pop-container">
				<view class="popup-title">
					<view class="u-popup-cancel-btn" @click="closepop">取消</view>
					<view class="u-title">选择时间</view>
					<view class="u-popup-sure-btn" @click="handleSelectSure">确定</view>
				</view>
				<view class="picker-height">
					<picker-view v-if="visible" class="mpvue-picker-view"  :indicator-style="indicatorStyle" :value="curData" @change="bindChange">
						<picker-view-column>
							<view class="item" v-for="(item, index) in years" :key="index">{{ item }}年</view>
						</picker-view-column>
						<picker-view-column>
							<view class="item" v-for="(item, index) in months" :key="index">{{ item }}月</view>
						</picker-view-column>
						<picker-view-column>
							<view class="item" v-for="(item, index) in days" :key="index">{{ item }}日</view>
						</picker-view-column>
					</picker-view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		props: {
			isShow:false
		},
		data() {
			const currentDate = this.getDate({
				format: true
			});
			const date = new Date();
			const years = [];
			const year = date.getFullYear();
			const months = [];
			const month = date.getMonth() + 1;
			const days = [];
			const day = date.getDate();
			for (let i = 1900; i <= date.getFullYear(); i++) {
				years.push(i);
			}
			for (let i = 1; i <= 12; i++) {
				months.push(i);
			}
			for (let i = 1; i <= 31; i++) {
				days.push(i);
			}
			return {
				startTime: '',
				startTimeDisplay: '开始时间',
				timeSelectActive: 1,
				currentDate: '',
				date: currentDate,
				timeIndex: 0,
				years,
				year,
				months,
				month,
				days,
				day,
				curData: [9999, month - 1, day - 1],
				visible: false,
				indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth / (750 / 100))}px;`
			};
		},
		mounted() {
			console.log('---mounted----');
		},
		watch: {
			isShow(val) {
				console.log('---val-----', val);
				if(val){
					this.startTimeDisplay = this.getTodayTime();
					this.curData=[9999, this.startTimeDisplay.split("-")[1] - 1, this.startTimeDisplay.split("-")[2] - 1]
					console.log('---TodayTime-----', JSON.stringify(this.curData));
					this.$refs.popcash.open();
					this.visible = true;
					this.timeChose(0);
				}
			}
		},
		methods: {
			//今天的时间
			getTodayTime() {
				var day2 = new Date();
				day2.setTime(day2.getTime());
				var time = day2.getFullYear() + '-' + this.check0((day2.getMonth() + 1)) + '-' + this.check0(day2.getDate());
				return time;
			},
			check0(num){
				num = +num;
				return num > 9 ? num : ('0'+num);
			},
			bindChange(e) {
				const val = e.detail.value;
				console.log('当前:' + val);
				this.curData = val;
				this.year = this.years[val[0]];
				this.month = this.months[val[1]];
				this.day = this.days[val[2]];
				//将选择的年月日变为number形式，便于比较之用
				var y = parseInt(this.year);
				var m = parseInt(this.month);
				var d = parseInt(this.day);
				//选择不同月份显示的天数不同
				if (m == 1 || m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12) {
					if (this.days.length != 31) {
						this.days = [];
						for (let i = 1; i <= 31; i++) {
							this.days.push(i);
						}
					}
				} else if (m == 4 || m == 6 || m == 9 || m == 11) {
					if (this.days.length != 30) {
						this.days = [];
						for (let i = 1; i <= 30; i++) {
							this.days.push(i);
						}
					}
				} else if (m == 2) {
					if ((y % 4 == 0 && y % 100 != 0) || y % 400 == 0) {
						//闰年
						if (this.days.length != 29) {
							this.days = [];
							for (let i = 1; i <= 29; i++) {
								this.days.push(i);
							}
						}
					} else {
						//平年
						if (this.days.length != 28) {
							this.days = [];
							for (let i = 1; i <= 28; i++) {
								this.days.push(i);
							}
						}
					}
				}
				//处理选择今年的情况
				if (y == this.currentYear) {
					//最多显示到当前月份
					if (this.months.length != this.currentMonth) {
						this.months = [];
						for (let i = 1; i <= this.currentMonth; i++) {
							this.months.push(i);
						}
					}
					//如果选择的是当前月份，那么日最多显示到今天
					if (m == this.currentMonth) {
						if (this.days.length != this.currentDay) {
							this.days = [];
							for (let i = 1; i <= this.currentDay; i++) {
								this.days.push(i);
							}
						}
					}
				} else {
					this.months = [];
					for (let i = 1; i <= 12; i++) {
						this.months.push(i);
					}
				}
				this.month = this.check0(this.month);
				this.day = this.check0(this.day);
				
				if (this.timeIndex == 0) {
					this.startTimeDisplay = this.year.toString() + '-' + this.month.toString() + '-' + this.day.toString();
				}
				console.log('当前选中' + this.year.toString() + '-' + this.month.toString() + '-' + this.day.toString());
			},
			timeChose(index) {
				var that = this;
				this.timeIndex = index;
				var date = this.startTimeDisplay;
				that.curData = that.getCurIndex(date);
			},
			getCurIndex(date) {
				var years = +date.split('-')[0];
				var months = +date.split('-')[1];
				var days = +date.split('-')[2];
				return [this.years.indexOf(years), this.months.indexOf(months), this.days.indexOf(days)]
			},
			popChange(e) {
				if(!e.show){
					var obj = {
						startTime: "",
						isclose: false
					};
					this.$emit('returnDate', obj);
				}
				console.log('----popChange---'+JSON.stringify(e));
			},
			closepop() {
				console.log('----closepop---');
				var obj = {
					startTime: "",
					isclose: false
				};
				this.$emit('returnDate', obj);
				this.$refs.popcash.close();
			},
			dateMinus(date1, date2) {
				var sdate = new Date(date1.replace(/-/g, "/"));
				var now = new Date(date2.replace(/-/g, "/"));
				var days = now.getTime() - sdate.getTime();
				var day = parseInt(days / (1000 * 60 * 60 * 24));
				return day;
			},
			startDateChange(e) {
				this.timeIndex = 0;
				this.startTimeDisplay = e.target.value;
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 50;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			handleSelectSure() {
				if (this.startTimeDisplay == '开始时间') {
					uni.showToast({
						title: '请选择开始时间',
						icon: 'none'
					});
					return;
				}
				this.startTime = this.startTimeDisplay;
				console.log(this.startTime)
				var obj = {
					startTime: this.startTime,
					isclose: false
				};
				this.$emit('returnDate', obj);
				this.$refs.popcash.close();
			}
		}
	};
</script>

<style scoped lang="scss">
	@import "time-chose.css"
</style>
